<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分页</title>
    <style>
        .pagination {
            text-align: center;
            margin-bottom: 20px;
            display: inline-block;
        }
        .pagination > a,.pagination span {
            padding: 4px 8px;
            background: #ccc;
            color: #666;
            font-size: 14px;
            font-family: Arial, Helvetica, sans-serif;
            line-height: 22px;
            text-decoration:none;
        }
        .pagination > .current ,  .pagination > a:hover{
            padding: 4px 8px;
            background: #cc0000;
            color: #fff;
            font-size: 14px;
            font-family: Arial, Helvetica, sans-serif;
            text-decoration: none;
        }
        .pagination:after {
            content: "";
            display: table;
            clear: both;
        }
    </style>
    <link rel="stylesheet" href="../../../css/public.css">
</head>
<body>
    <div class="pagination">
        <a href="">上一页</a>
        <a href="" class="current">1</a>
        <a href="">2</a>
        <a href="">3</a>
        <a href="">4</a>
        <a href="">下一页</a>
    </div>
    <div id="codeBlock">
        <pre>
            <xmp>
                <div class="pagination">
                    <a href="">上一页</a>
                    <a href="" class="current">1</a>
                    <a href="">2</a>
                    <a href="">3</a>
                    <a href="">4</a>
                    <a href="">下一页</a>
                </div>
            </xmp>
        </pre>
        <pre>
                .pagination {
                    text-align: center;
                    margin-bottom: 20px;
                    display: inline-block;
                    &:after {
                        content: "";
                        display: table;
                        clear: both;
                    }
                    > a,span {
                        padding: 4px 8px;
                        background: #ccc;
                        color: #666;
                        font-size: 14px;
                        font-family: Arial, Helvetica, sans-serif;
                        line-height: 22px;
                        text-decoration:none;
                    }
                    > .current ,> a:hover{
                        padding: 4px 8px;
                        background: #cc0000;
                        color: #fff;
                        font-size: 14px;
                        font-family: Arial, Helvetica, sans-serif;
                        text-decoration: none;
                    }
                }
            </pre>
    </div>
</body>
</html>